<template>
	<view class="workbench">
		<view class="title" @click="popupOpen">
			<o-row>
				<o-col span="6">仪表盘</o-col>
				<o-col span="18" class="text-right">
					<text>{{ conditionText.join('/') }}</text>
					<u-icon name="arrow-right" color="#999"></u-icon>
				</o-col>
			</o-row>
		</view>

		<view class="panel">
			<view class="panel-title">销售简报</view>
			<u-line></u-line>
			<o-row gutter="20" class="baseinfo">
				<o-col span="12" class="o-col" v-for="(v, k) in list" :key="k">
					<view class="inner" @click="popupOpenList(v, k)">
						<view class="icon">
							<u-image width="30px" height="30px" :src="v.icon"></u-image>
						</view>
						<view class="con">
							<text class="key">{{ v.name }}</text>
							<text class="val">
								<text class="strong">{{ v.val }}</text>
								{{ v.unit }}
							</text>
						</view>
					</view>
				</o-col>
			</o-row>
		</view>

		<!-- 选择筛选条件弹窗 -->
		<u-popup v-model="popup.status" closeable :mode="popup.mode" :length="popup.height" border-radius="10" :safe-area-inset-bottom="true">
			<view class="popup-title">
				<view class="inner">选择筛选条件</view>
			</view>

			<u-tabs ref="tabs" :list="tab.list" :current="tab.index" :is-scroll="false" @change="tabChange"></u-tabs>

			<scroll-view :scroll-y="true" class="popup-body" style="height: 450px">
				<!-- 日期 -->
				<list-date v-show="tab.index == 0" @selected="dateSelected"></list-date>
				<!-- 员工 -->
				<list-user v-show="tab.index == 1" @selected="userSelected"></list-user>
				<!-- 部门 -->
				<list-department v-show="tab.index == 2" @selected="departmentSelected"></list-department>
			</scroll-view>
			<view class="popup-footer">
				<view class="inner">
					<u-button type="primary" @click="search">确定</u-button>
				</view>
			</view>
		</u-popup>

		<!-- 简报弹窗 -->
		<u-popup v-model="popupList.status" closeable :mode="popupList.mode" :length="popupList.height" border-radius="10" :safe-area-inset-bottom="true">
			<view class="popup-title">
				<view class="inner">{{ popupList.title }}</view>
			</view>
			<scroll-view :scroll-y="true" class="popup-body" style="height: 560px">
				<component :is="popupList.widget" :data="popupList.data"></component>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
import oRow from '@/components/oveui-layout/o-row/o-row.vue';
import oCol from '@/components/oveui-layout/o-col/o-col.vue';
import listDate from './components/listDate';
import listUser from './components/listUser';
import listDepartment from './components/listDepartment';

import customerCount from './components/customerCount';
import contactsCount from './components/contactsCount';
import businessCount from './components/businessCount';
import contractCount from './components/contactsCount';
import recordCount from './components/recordCount';
export default {
	components: { oRow, oCol, listDate, listUser, listDepartment, customerCount, contactsCount, businessCount, contractCount, recordCount },
	data: () => ({
		list: [
			{
				key: 'customerCount',
				name: '新增客户',
				val: '0',
				unit: '个',
				icon: require('@/assets/img/c_curomer.png'),
				label: 2, // 0为变化的商机 2为客户 3为联系人 5为商机 6为合同 7为回款
			},
			{
				key: 'contactsCount',
				name: '新增联系人',
				val: '0',
				unit: '个',
				icon: require('@/assets/img/c_contact.png'),
				label: 3,
			},
			{
				key: 'businessCount',
				name: '新增商机',
				val: '0',
				unit: '个',
				icon: require('@/assets/img/c_business.png'),
				label: 5,
			},
			{
				key: 'contractCount',
				name: '新增合同',
				val: '0',
				unit: '个',
				icon: require('@/assets/img/c_contract.png'),
				label: 6,
			},
			// {
			// 	key: 'customerCount',
			// 	name: '合同金额',
			// 	val: '0.00',
			// 	unit: '元',
			// 	icon: '',
			// },
			// {
			// 	key: 'customerCount',
			// 	name: '商机金额',
			// 	val: '0.00',
			// 	unit: '元',
			// 	icon: '',
			// },
			// {
			// 	key: 'customerCount',
			// 	name: '回款金额',
			// 	val: '0.00',
			// 	unit: '元',
			// 	icon: '',
			// },
			{
				key: 'recordCount',
				name: '新增跟进记录',
				val: '0',
				unit: '条',
				icon: require('@/assets/img/c_log.png'),
			},
		],
		// 弹窗信息
		popup: {
			status: false,
			mode: 'bottom',
			height: '600px',
		},
		popupList: {
			status: false,
			mode: 'bottom',
			height: '600px',
			title: '',
			widget: '',
			data: {},
		},
		// 选项卡信息
		tab: {
			list: [{ name: '日期' }, { name: '员工' }, { name: '部门' }],
			index: 0,
		},
		// 请求接口的条件
		condition: {
			// 日期
			type: 'today',
			// 自定义 开始日期
			startTime: '',
			// 自定义结束日期
			endTime: '',
			// 员工id
			userIds: '',
			// 部门id
			deptIds: '',
		},
		// 显示的筛选条件文本
		conditionText: ['今天', '本人'],
	}),
	methods: {
		// 初始化参数
		initParmas() {
			const userInfo = uni.getStorageSync('userInfo');
			this.condition.userIds = userInfo.userId;
		},
		// 获取数据
		async getData() {
			let data = this.filterEmpty(this.condition);
			let res = await this.$api.customer.common.bulletin(data);
			if (res.code === 200) {
				let list = res.data || {};

				this.list.map((v) => {
					v.val = list[v.key];
					return v;
				});
			}
		},
		// 过滤空值
		filterEmpty(obj) {
			let newObj = {};
			Object.keys(obj).forEach((v) => {
				if (obj[v]) {
					newObj[v] = obj[v];
				}
			});
			return newObj;
		},
		// 打开弹窗
		popupOpen() {
			this.popup.status = true;
		},
		// 选项卡改变事件
		tabChange(index) {
			this.tab.index = index;
		},
		// 日期选择后
		dateSelected(text, arr) {
			if (arr.length === 1) {
				// 快捷日期
				this.condition.startTime = '';
				this.condition.endTime = '';
				this.condition.type = arr[0];
			} else {
				// 自定义日期
				this.condition.startTime = arr[0];
				this.condition.endTime = arr[1];
				this.condition.type = '';
			}

			this.conditionText[0] = text.length ? text : '今天';
		},
		// 选择用户 选择后
		userSelected(len, val) {
			this.condition.userIds = val;
			this.conditionText[1] = len ? len + '个员工' : '本人';
		},
		// 部门选择
		departmentSelected(len, val) {
			this.condition.deptIds = val;
			this.conditionText[2] = len ? len + '个部门' : '';
		},
		// 搜索
		search() {
			this.popup.status = false;
			this.getData();
		},
		// 打开销售简报详细列表
		popupOpenList(row, index) {
			// 设置弹窗标题
			this.popupList.title = '销售简报-';
			this.popupList.title += row.name;

			// 设置弹窗数据
			this.popupList.data = this.filterEmpty(this.condition);
			this.popupList.data.label = row.label;

			// 设置显示的动态组件
			this.popupList.widget = row.key;

			// 显示弹窗
			this.popupList.status = true;
		},
	},
	computed: {},
	watch: {},

	// 周期函数--监听页面加载
	onLoad() {},
	// 周期函数--监听页面初次渲染完成
	onReady() {},
	// 周期函数--监听页面显示
	onShow() {
		this.initParmas();
		this.getData();
	},
	// 周期函数--监听页面隐藏
	onHide() {},
	// 周期函数--监听页面卸载
	onUnload() {},
	// 页面处理函数--监听用户下拉动作
	async onPullDownRefresh() {
		await this.getData();
		uni.stopPullDownRefresh();
	},
	// 页面处理函数--监听用户上拉触底
	onReachBottom() {
		uni.stopPullDownRefresh();
	},
	// 页面处理函数--监听页面滚动
	/* onPageScroll(event) {}, */
	// 页面处理函数--用户点击右上角分享
	/* onShareAppMessage(options) {}, */
};
</script>

<style lang="scss" scoped>
.workbench {
	overflow: hidden;
}
.title {
	padding: 15px;
	margin-bottom: 15px;
	background: #fff;
}
.panel {
	background: #fff;
	margin-bottom: 20px;
	padding: 10px;
	.panel-title {
		padding: 0 0 10px;
		font-size: 16px;
	}
}
.baseinfo {
	.o-col {
		margin: 10px 0;

		.inner {
			display: flex;
			align-items: flex-start;
			padding: 0 20px;

			.icon .u-image {
				width: 30px;
				margin-top: 5px;
			}

			.con {
				padding-left: 10px;
			}
		}

		.key,
		.val {
			display: block;
		}

		.key {
			margin-top: 5px;
			color: $uni-color-subtitle;
			font-size: 14px;
		}
		.val {
			color: $uni-color-subtitle;
			.strong {
				font-size: 16px;
				font-weight: bold;
				color: #333;
			}
		}
	}
}

.u-tabs /deep/ {
	height: 40px;
	.u-scroll-view {
		position: fixed;
		left: 0;
		right: 0;
		top: 50px;
		z-index: 2;
		background: #fff;
	}
}

.u-radio-group {
	padding: 15px;
	.u-radio {
		width: 80px !important;
		margin: 10px 0;
	}
}
</style>
